let btns = document.querySelectorAll(".btn");
let items = document.querySelectorAll(".item");
let cnt = 0;
let before = -1;

items.forEach((item, idx) => {
  item.addEventListener("click", () => {
    if (btns[idx].style.left != "55px") {
      cnt += 1;
      // console.log(cnt);
      if (cnt === 3) {
        cnt -= 1;
        btns[before].style.left = "5px";
        items[before].style.backgroundColor = "#d0d0d0";
        btns[before].classList.add("animate");
        btns[before].addEventListener(
          "animationend",
          function () {
            btns[idx].classList.remove("animate");
          },
          { once: true }
        );
      }
      btns[idx].style.left = "55px";
      btns[idx].classList.add("animate");
      item.style.backgroundColor = "#8e44ad";
      btns[idx].addEventListener(
        "animationend",
        function () {
          btns[idx].classList.remove("animate");
        },
        { once: true }
      );
      before = idx;
    } else {
      cnt -= 1;
      btns[idx].style.left = "5px";
      item.style.backgroundColor = "#d0d0d0";
      btns[idx].classList.add("animate");
      btns[idx].addEventListener(
        "animationend",
        function () {
          btns[idx].classList.remove("animate");
        },
        { once: true }
      );
    }
  });
});
